<template>
  <div class="qq-result">
    <div class="img-box">
      <img v-if="loginSuccess===true" class="login-result-image" src="../../assets/success.png" height="200" width="200">
      <img v-if="loginSuccess===false" class="login-result-image" src="../../assets/failure.png" height="200" width="200">
    </div>
    <div class="qq-tips">
      <span v-if="loginSuccess===true">登陆成功</span>
      <span v-if="loginSuccess===false">登陆失败 <span style="color: red">{{ msg }}</span></span>
    </div>
    <div
      v-loading="isLoading"
      element-loading-text="跳转中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0)"
      class="spinner-container"
    />
  </div>
</template>

<script>
import userApi from '../../api/myuser'
import { setToken } from '../../utils/auth'
export default {
  name: 'Qqauth',
  data() {
    return {
      linkDisabled: false,
      isLoading: true,
      loginSuccess: true,
      msg: ''
    }
  },
  created() {
    // 'http://www.likunkun.club/#/qqauth#access_token=479FA9973698B0672C510D2606F86128&expires_in=7776000&state=fyuikjqytfgad'
    const href = window.location.href //'http://www.likunkun.club/#/qqauth#access_token=479FA9973698B0672C510D2606F86128&expires_in=7776000&state=admin_fyuikjqytfgad' ||
    // 只有路径中包含#access_token才会进行后面的逻辑
    if (href.indexOf('#access_token') >= 0) {
      const lastIndex = href.lastIndexOf('&')
      const state = href.substr(lastIndex + 7)
      const index = href.trim().lastIndexOf('#')
      const substr = href.substr(index + 1)
      const index2 = substr.indexOf('&')
      // 取到 access_token=479FA9973698B0672C510D2606F86128 这个字符串
      const substr1 = substr.substr(0, index2)
      const access_token = 'access_token='
      const s = substr1.substr(access_token.length, substr1.length)
      if (s.length > 0) {
        // QQ后台登陆
        if (state.startsWith('admin_')) {
          userApi.qqLogin(s, '2').then(res => {
            if (res.code === 200) {
              const { data } = res
              this.$store.commit('user/SET_TOKEN', data.token)
              setToken(data.token)
              this.isLoading = false
              this.$router.push('/')
            } else {
              this.$message.error(res.msg)
            }
          })
          // 后台登录
        } else {
          this.loginSuccess = false
          this.isLoading = false
          this.msg = '非法跳转'
        }
      } else {
        this.loginSuccess = false
        this.isLoading = false
        this.msg = 'accessToken解析异常'
        console.error('QQ登录accessToken解析异常', s)
      }
    } else {
      this.loginSuccess = false
      this.isLoading = false
      this.msg = '没有access_token'
      console.error('路径中没有包含#access_token')
    }
  }
}
</script>

<style scoped>
.qq-result{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.qq-result .img-box{
  margin: 50px 0 20px 0;
  width: 50px;
  height: 50px;
}
.qq-result .img-box .login-result-image{
  width: 100%;
  height: 100%;
}
.qq-result .qq-tips{
  font-size: 16px;
  line-height: 25px;
  margin: 0 0 20px 0;
  color: #8c939d;
}
.qq-result .spinner-container{
  display: flex;
  width: 400px;
  height: 20px;
}
</style>
